<template>
	<el-dialog
    v-model="dialogVisible"
    width="60%"
				style="background-color: rgba(8, 64, 132, 0.9);"
				:before-close="handleClose"
  >
			<div class="box" ref="echartDom"></div>
  </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect,defineEmits } from "vue";
import { pxToRem } from "@/utils/index";
const dialogVisible = ref(false)
// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
});

const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['closeDialog'])
// echarts初始化渲染
const getEchart = () => {
	dialogVisible.value = true;
	if (echartDom.value) {
			myChart.value = echarts.init(echartDom.value);

		
			// 渲染图表数据
			const option = props.housingSupplyStatsData
			myChart.value.setOption(option);
	}
};
const updateChart = () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}

	getEchart();
	
};

watchEffect(() => {
	updateChart();
});

const handleClose = () => {
	dialogVisible.value = false
	emit('closeDialog',dialogVisible.value)
}


onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
<style lang="less" scoped>
.box{
	width: 100%;
	height: 680px;
}
</style>
